#{extends 'main.html' /}
#{set title:post.title /}

<ul id="pagination">
	#{if post.previous()}
		<li id="previous">
			<a href="@{Application.show(post.previous().id)}">
				${post.previous().title}
			</a>
		</li>
	#{/if}
	#{if post.next()}
		<li id="next">
			<a href="@{Application.show(post.next().id)}">
				${post.next().title}
			</a>
		</li>
	#{/if}
</ul>
#{if flash.success}
	<p class="success">${flash.success}</p>
#{/if}

#{display post:post, as:'full' /}

<h3>Post a comment</h3>

#{form @Application.postComment(post.id)}
	#{ifErrors}
		<p class="error">
			${errors[0]}
		</p>
	#{/ifErrors}
	<p>
		<label for="author">Your name:</label>
		<input type="text" name="author" id="author" value="${params.author}"/>
	</p>
	<p>
		<label for="content">Your message:</label>
		<textarea name="content" id="content">${params.content}</textarea>
	</p>
	<p>
		<label for="code">Please type the code below:</label>
		<img src="@{Application.captcha(randomID)}" />
		<br />
		<input type="text" name="code" size="18" value="" />
		<input type="hidden" name="randomID" value="${randomID}" />
	</p>
	<p>
		<input type="submit" value="Submit your comment" />
	</p>
#{/form}

<script type="text/javascript" charset="utf-8">
	$(function(){
		//Expose the form
		$('form').click(function(){
			$('form').expose({api: true}).load();	
		});
		
		//If there is an error, focus to form
		if($('form .error').size()){
			$('form').expose({api: true, loadSpeed: 0}).load();
			$('form input[type=text]').get(0).focus();
		}
		
	});
</script>